<template lang="html">
  <div class="song" @click="playHandler">
    <img :src="list.pic_s500" alt="" />
    <span>{{ list.title }}</span>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from "vuex"

export default {
  name: "Song",
  data () {
    return{
      songdata: null
    }
  },
  props: {
    list: {
      type: Object,
      required: true
    }
  },
  methods: {
    playHandler(){
      this.$axios.get("http://www.wwtliu.com/sxtstu/music/baidu/play.php?mid=" + this.list.song_id)
        .then(res => {
          if(!res.data){return}
          this.updataPlay(true)
          this.updataCurrentSong(res.data)
          this.addSongArr(res.data)
          this.songdata = res.data;
        })
        .catch(error => {
          console.log(error)
        })
    },
    ...mapMutations(['updataPlay','updataCurrentSong','addSongArr']),
    ...mapActions(['updataCurrentSongAsync'])
  },
  computed: {
    ...mapState(['getPlay','currentSong'])
  }
}
</script>

<style lang="less" scoped>
  .song{
    float: left;
    img{
      width: 240/100rem;
      height: 240/100rem;
    }
    span{
      font-size: 25/100rem;
      width: 220/100rem;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 46/100rem;
      margin-left: 10/100rem;
    }
  }


</style>
